<div id="app">
    <template>
        <el-row :gutter="20">
            <el-col :span="3">
                <el-button type="primary" @click="exportLog">导出记录</el-button>
            </el-col>
            <el-col :span="21" style="text-align: right;float: right">
                <el-form :inline="true" label-width="80px">
                    <el-select v-model="params.type" placeholder="请选择投票类型" @change="ChangePage(1)">
                        <el-option label="请选择投票类型" value=""></el-option>
                        <el-option label="常规投票" value="1"></el-option>
                        <el-option label="看视频投票" value="2"></el-option>
                        <el-option label="礼物投票" value="3"></el-option>
                    </el-select>
                    <el-date-picker
                            v-model="params.createtime"
                            type="datetimerange"
                            :picker-options="pickerOptions"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            align="right" @change="ChangePage(1)">
                    </el-date-picker>
                    <el-input placeholder="活动id" v-model="params.vote_id" style="width: 100px;"></el-input>
                    <el-input placeholder="作品id" v-model="params.person_id" style="width: 100px;"></el-input>
                    <el-input placeholder="作品标题" v-model="params.name" style="width: 300px;">
                        <el-button slot="append" icon="el-icon-search" @click="ChangePage(1)"></el-button>
                    </el-input>
                </el-form>
            </el-col>
        </el-row>

        <el-table
                :data="list"
                border
                style="width: 100%;margin-top: 20px">
            <el-table-column
                    prop="vote.name"
                    label="活动名称" align="center">
            </el-table-column>
            <el-table-column
                    prop="person.name"
                    label="作品信息" align="center">
            </el-table-column>
            <el-table-column
                    prop="ip"
                    label="投票ip" align="center">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="投票类型" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == '1'">常规投票</span>
                    <span v-else-if="scope.row.type == '2'">看视频投票</span>
                    <span v-else>礼物投票</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createtime_text"
                    label="投票时间" align="center">
            </el-table-column>
            <el-table-column label="投票表单" align="center">
                <template slot-scope="scope" v-if="scope.row.join_form">
                    <el-button type="primary" size="small"
                               @click="open(scope.row.join_form)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total" @current-change='ChangePage'>
            </el-pagination>
        </div>

    </template>
</div>

<script type="module">
    new Vue({
        el: '#app',
        data: function () {
            return {
                list: [],
                page: 1,
                total: 0,
                params: {
                    vote_id: "",
                    person_id: "",
                    type: "",
                    name: '',
                    createtime:[]
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                }
            }
        },
        created() {
            this.params.vote_id = getParam('vote_id')
            this.ajax();
        },
        methods: {
            ajax() {
                this.params.page = this.page
                post('', this.params).then(res => {
                    this.list = res.data.rows;
                    this.total = res.data.total;
                })
            },
            ChangePage(page) {
                this.page = page
                this.ajax()
            },
            open(form) {
                let html = '';
                for (var i in form){
                    html += '<div>'+i+'：'+ form[i]+'</div>'
                }
                this.$alert(html, '投票表单', {
                    dangerouslyUseHTMLString: true
                });
            },
            exportLog(){
                this.$confirm('请选择操作?', '导出数据', {
                    confirmButtonText: '全部('+this.total+'条)',
                    cancelButtonText: '本页',
                    center: true,
                    distinguishCancelAndClose: true,
                    callback:(action, instance)=>{
                        if (action === 'close'){
                            return
                        }
                        let params = {...this.params}
                        if (action === 'confirm'){
                            params.limit = 9999999999
                        }else if (action === 'cancel'){
                            params.limit = 10
                        }
                        params.createtime = params.createtime.join(',')
                        window.open('/kzvote/log/export?'+toQueryString(params), '_blank')
                    }
                })
            }
        }
    })
</script>
<style>
    .el-select {
        min-width: 120px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
        width: 50%;
    }
</style>